<template>
  <lay-layer
    v-model="visible"
    :title="layer_title"
    :area="['860px', '500px']"
    :shadeClose="shadeClose"
    :maxmin="true"
    :moveOut="true"
    :resize="true"
    closeBtn="1"
    :end="end"
    :close="close"
    :beforeClose="beforeClose"
    :btn="FORM_btn"
  >
    <lay-form :model="modelForm" ref="Form_Ref" required :pane="true" size="sm">
      <lay-tab
        type="card"
        v-model="Tab_vmodel"
        @change="tab_change_unit"
        style="padding: 0px; margin: 0px"
      >
        <lay-tab-item title="基础信息" id="1">
          <div style="padding-left: 10px; padding-right: 10px">
            <lay-row>
              <lay-col md="9">
                <div>
                  <lay-form-item label="商品条码" prop="barcode">
                    <template #label>
                      <lay-tooltip
                        position="right"
                        :enterable="false"
                        content="尽量不要重复，扫码打印优先使用。"
                      >
                        <span>商品条码</span>
                      </lay-tooltip>
                    </template>
                    <lay-input
                      v-model.string="modelForm.barcode"
                      type="string"
                      :disabled="modelForm.off_operation == 1"
                    ></lay-input>
                  </lay-form-item>
                  <lay-form-item label="商品名称" prop="name">
                    <lay-input
                      v-model.string="modelForm.name"
                      type="string"
                    ></lay-input>
                  </lay-form-item>
                  <lay-form-item label="基本单位" prop="unit">
                    <template #label>
                      <lay-tooltip
                        position="right"
                        :enterable="false"
                        content="基本单位(最小出入库单位)例子：20支烟=1包烟/10包烟=1条烟/20条烟=1箱烟，如此类推。如果1支烟也销售那么基本单位做“支”。如果你是批发商最小销售单位为“条”那就做条。禁止做基本单位为条，而后续销售时0.1条出库。"
                      >
                        <span>基本单位</span>
                      </lay-tooltip>
                    </template>
                    <lay-input
                      v-model.string="modelForm.unit"
                      type="string"
                    ></lay-input>
                  </lay-form-item>
                  <lay-form-item label="自动编号">
                    <template #label>
                      <lay-tooltip
                        position="right"
                        :enterable="false"
                        content="尽量由系统自动生成。"
                      >
                        <span>自动编号</span>
                      </lay-tooltip>
                    </template>
                    <lay-input
                      v-model="modelForm.auto_number"
                      :disabled="modelForm.off_operation == 1"
                    >
                      <template #suffix>
                        <lay-icon
                          type="layui-icon-refresh-three"
                          @click="auto_number_GoodsAutoNumber"
                        ></lay-icon>
                      </template>
                    </lay-input>
                  </lay-form-item>
                  <lay-form-item label="商品货号">
                    <lay-input v-model="modelForm.goods_no"></lay-input>
                  </lay-form-item>
                  <lay-form-item label="序列号">
                    <lay-input v-model="modelForm.serial_number"></lay-input>
                  </lay-form-item>
                  <lay-form-item label="自编码">
                    <lay-input v-model="modelForm.custom_code"></lay-input>
                  </lay-form-item>
                  <lay-form-item label="商城品名">
                    <lay-input
                      v-model="modelForm.name_web"
                      placeholder="商城显示的名称"
                    ></lay-input>
                  </lay-form-item>
                  <lay-form-item label="打印品名">
                    <lay-input
                      v-model="modelForm.name_print"
                      placeholder="商城显示的名称"
                    ></lay-input>
                  </lay-form-item>
                  <lay-form-item label="拼音码">
                    <lay-input v-model="modelForm.name_py"></lay-input>
                  </lay-form-item>
                  <lay-form-item label="商品品牌">
                    <lay-input v-model="modelForm.brand"></lay-input>
                  </lay-form-item>
                </div>
              </lay-col>
              <lay-col md="6">
                <div style="padding-left: 10px; padding-right: 10px">
                  <lay-form-item label="进货价/元">
                    <lay-input
                      v-model.number="modelForm.prc_in"
                      type="number"
                    ></lay-input>
                  </lay-form-item>
                  <lay-form-item label="批发价/元">
                    <lay-input
                      v-model.number="modelForm.prc_cust"
                      type="number"
                    ></lay-input>
                  </lay-form-item>
                  <lay-form-item label="会员价/元">
                    <lay-input
                      v-model.number="modelForm.prc_vip"
                      type="number"
                    ></lay-input>
                  </lay-form-item>
                  <lay-form-item label="零售价/元">
                    <lay-input
                      v-model.number="modelForm.prc_sale"
                      type="number"
                    ></lay-input>
                  </lay-form-item>
                  <lay-form-item label="商城价/元">
                    <lay-input
                      v-model.number="modelForm.prc_web"
                      type="number"
                    ></lay-input>
                  </lay-form-item>
                  <lay-form-item label="配送价/元">
                    <lay-input
                      v-model.number="modelForm.prc_dist"
                      type="number"
                    ></lay-input>
                  </lay-form-item>
                  <lay-form-item label="调货价/元">
                    <lay-input
                      v-model.number="modelForm.prc_transfer_goods"
                      type="number"
                    ></lay-input>
                  </lay-form-item>
                  <lay-form-item label="同行价/元">
                    <lay-input
                      v-model.number="modelForm.prc_same"
                      type="number"
                    ></lay-input>
                  </lay-form-item>
                  <lay-form-item label="团购价/元">
                    <lay-input
                      v-model.number="modelForm.prc_groupon"
                      type="number"
                    ></lay-input>
                  </lay-form-item>
                  <lay-form-item label="微商价/元">
                    <lay-input
                      v-model.number="modelForm.prc_ws"
                      type="number"
                    ></lay-input>
                  </lay-form-item>
                  <lay-form-item label="团长价/元">
                    <lay-input
                      v-model.number="modelForm.prc_head"
                      type="number"
                    ></lay-input>
                  </lay-form-item>
                </div>
              </lay-col>
              <lay-col md="9">
                <div>
                  <lay-form-item label="商品类别">
                    <lay-tree-select
                      v-model.number="modelForm.cls_id"
                      :data="godds_cls_data"
                      @change="change_godds_cls_data"
                    ></lay-tree-select>
                  </lay-form-item>
                  <lay-form-item label="主供应商">
                    <lay-select
                      v-model="modelForm.sup_dbid"
                      :options="sup_data"
                      placeholder="请选择"
                    ></lay-select>
                    <!-- <lay-tree-select v-model="modelForm.sup_dbid" :data="sup_data"
                                            @change="change_sup_data"></lay-tree-select> -->
                  </lay-form-item>
                  <lay-form-item label="商品性质">
                    <lay-select
                      v-model="modelForm.nature_flag"
                      placeholder="请选择"
                    >
                      <lay-select-option
                        value="A"
                        label="普通"
                      ></lay-select-option>
                      <lay-select-option
                        value="B"
                        label="称重"
                      ></lay-select-option>
                      <lay-select-option
                        value="C"
                        label="按份"
                      ></lay-select-option>
                      <lay-select-option
                        value="D"
                        label="按次"
                      ></lay-select-option>
                      <lay-select-option
                        value="E"
                        label="按时"
                      ></lay-select-option>
                      <lay-select-option
                        value="F"
                        label="面价"
                      ></lay-select-option>
                    </lay-select>
                  </lay-form-item>
                  <lay-form-item label="捆绑组合">
                    <lay-select
                      v-model="modelForm.group_flag"
                      placeholder="请选择"
                    >
                      <lay-select-option
                        value="A"
                        label="普通"
                      ></lay-select-option>
                      <lay-select-option
                        value="B"
                        label="组合"
                      ></lay-select-option>
                      <lay-select-option
                        value="C"
                        label="拆分"
                      ></lay-select-option>
                      <lay-select-option
                        value="D"
                        label="自动组合"
                      ></lay-select-option>
                      <lay-select-option
                        value="E"
                        label="自动拆分"
                      ></lay-select-option>
                    </lay-select>
                  </lay-form-item>
                  <lay-form-item label="商品状态">
                    <lay-select v-model="modelForm.state" placeholder="请选择">
                      <lay-select-option
                        value="A"
                        label="正常"
                      ></lay-select-option>
                      <lay-select-option
                        value="B"
                        label="停用"
                      ></lay-select-option>
                      <lay-select-option
                        value="C"
                        label="只销"
                      ></lay-select-option>
                      <lay-select-option
                        value="D"
                        label="只购"
                      ></lay-select-option>
                    </lay-select>
                  </lay-form-item>
                  <lay-form-item label="提成方式">
                    <lay-select v-model="modelForm.deduct" placeholder="请选择">
                      <lay-select-option
                        value="A"
                        label="按金额"
                      ></lay-select-option>
                      <lay-select-option
                        value="B"
                        label="提成率"
                      ></lay-select-option>
                      <lay-select-option
                        value="C"
                        label="按计划"
                      ></lay-select-option>
                    </lay-select>
                  </lay-form-item>
                  <lay-form-item label="经销方式">
                    <lay-select
                      v-model="modelForm.distribute"
                      placeholder="请选择"
                    >
                      <lay-select-option
                        value="A"
                        label="购销"
                      ></lay-select-option>
                      <lay-select-option
                        value="B"
                        label="代销"
                      ></lay-select-option>
                      <lay-select-option
                        value="C"
                        label="联营"
                      ></lay-select-option>
                      <lay-select-option
                        value="C"
                        label="自产自销"
                      ></lay-select-option>
                    </lay-select>
                  </lay-form-item>
                  <lay-form-item label="封装方式">
                    <lay-select
                      v-model="modelForm.encapsulation"
                      placeholder="请选择"
                    >
                      <lay-select-option
                        value="A"
                        label="未知"
                      ></lay-select-option>
                      <lay-select-option
                        value="A2"
                        label="其它"
                      ></lay-select-option>
                      <lay-select-option
                        value="B1"
                        label="袋装"
                      ></lay-select-option>
                      <lay-select-option
                        value="B2"
                        label="瓶装"
                      ></lay-select-option>
                      <lay-select-option
                        value="B3"
                        label="罐装"
                      ></lay-select-option>
                      <lay-select-option
                        value="B4"
                        label="盒装"
                      ></lay-select-option>
                      <lay-select-option
                        value="B5"
                        label="箱装"
                      ></lay-select-option>
                      <lay-select-option
                        value="C1"
                        label="裸装"
                      ></lay-select-option>
                      <lay-select-option
                        value="C2"
                        label="散装"
                      ></lay-select-option>
                      <lay-select-option
                        value="C3"
                        label="无包装"
                      ></lay-select-option>
                      <lay-select-option
                        value="C4"
                        label="临封装"
                      ></lay-select-option>
                      <lay-select-option
                        value="D1"
                        label="真空袋"
                      ></lay-select-option>
                      <lay-select-option
                        value="D2"
                        label="真空罐"
                      ></lay-select-option>
                      <lay-select-option
                        value="D3"
                        label="真空装"
                      ></lay-select-option>
                      <lay-select-option
                        value="E1"
                        label="桶装"
                      ></lay-select-option>
                      <lay-select-option
                        value="E2"
                        label="筒装"
                      ></lay-select-option>
                      <lay-select-option
                        value="E3"
                        label="篮箩筐装"
                      ></lay-select-option>
                      <lay-select-option
                        value="E4"
                        label="盘装"
                      ></lay-select-option>
                      <lay-select-option
                        value="E5"
                        label="网装"
                      ></lay-select-option>
                      <lay-select-option
                        value="E6"
                        label="捆扎装"
                      ></lay-select-option>
                      <lay-select-option
                        value="E7"
                        label="穿钩装"
                      ></lay-select-option>
                    </lay-select>
                  </lay-form-item>
                  <lay-form-item label="形态">
                    <lay-select v-model="modelForm.form" placeholder="请选择">
                      <lay-select-option
                        value="A"
                        label="未知"
                      ></lay-select-option>
                      <lay-select-option
                        value="B"
                        label="固体"
                      ></lay-select-option>
                      <lay-select-option
                        value="C"
                        label="液体"
                      ></lay-select-option>
                      <lay-select-option
                        value="D"
                        label="粉状"
                      ></lay-select-option>
                      <lay-select-option
                        value="E"
                        label="软体"
                      ></lay-select-option>
                      <lay-select-option
                        value="F"
                        label="其它"
                      ></lay-select-option>
                    </lay-select>
                  </lay-form-item>
                  <lay-form-item label="毒性">
                    <lay-select
                      v-model="modelForm.toxicity"
                      placeholder="请选择"
                    >
                      <lay-select-option
                        value="A"
                        label="未知"
                      ></lay-select-option>
                      <lay-select-option
                        value="B"
                        label="无毒"
                      ></lay-select-option>
                      <lay-select-option
                        value="C"
                        label="剧毒"
                      ></lay-select-option>
                      <lay-select-option
                        value="D"
                        label="高毒"
                      ></lay-select-option>
                      <lay-select-option
                        value="E"
                        label="中毒"
                      ></lay-select-option>
                      <lay-select-option
                        value="F"
                        label="低毒"
                      ></lay-select-option>
                      <lay-select-option
                        value="G"
                        label="微毒"
                      ></lay-select-option>
                    </lay-select>
                  </lay-form-item>
                  <lay-form-item label="保质期" prop="expiration">
                    <lay-input
                      v-model.number="modelForm.expiration"
                      type="number"
                      style="width: 100px"
                    >
                      <template #suffix>天</template>
                    </lay-input>
                    <lay-switch
                      size="md"
                      v-model="modelForm.off_expiration"
                      onswitch-text="保质期管理开"
                      unswitch-text="保质期管理关"
                      :onswitch-value="1"
                      :unswitch-value="0"
                    ></lay-switch>
                  </lay-form-item>
                </div>
              </lay-col>
            </lay-row>
            <lay-row>
              <lay-col md="8">
                <div>
                  <lay-form-item label="包装规格">
                    <lay-input v-model="modelForm.unit_size"></lay-input>
                  </lay-form-item>
                  <lay-form-item label="商品规格">
                    <lay-input v-model="modelForm.goods_size"></lay-input>
                  </lay-form-item>
                  <lay-form-item label="规格款式">
                    <lay-input v-model="modelForm.sku_size"></lay-input>
                  </lay-form-item>
                  <lay-form-item label="产地">
                    <lay-input v-model="modelForm.producing_area"></lay-input>
                  </lay-form-item>
                  <lay-form-item label="厂家">
                    <lay-input v-model="modelForm.manufacturers"></lay-input>
                  </lay-form-item>
                  <lay-form-item label="型号">
                    <lay-input v-model="modelForm.product_model"></lay-input>
                  </lay-form-item>
                  <lay-form-item label="口味">
                    <lay-input v-model="modelForm.taste"></lay-input>
                  </lay-form-item>
                  <lay-form-item label="版本">
                    <lay-input v-model="modelForm.edition"></lay-input>
                  </lay-form-item>
                  <lay-form-item label="商标">
                    <lay-input v-model="modelForm.trademark"></lay-input>
                  </lay-form-item>
                  <lay-form-item label="颜色">
                    <lay-input v-model="modelForm.colour"></lay-input>
                  </lay-form-item>
                  <lay-form-item label="尺寸">
                    <lay-input v-model="modelForm.size"></lay-input>
                  </lay-form-item>
                  <lay-form-item label="属性">
                    <lay-input v-model="modelForm.attribute"></lay-input>
                  </lay-form-item>
                </div>
              </lay-col>
              <lay-col md="8">
                <div style="padding-left: 10px; padding-right: 10px">
                  <lay-form-item label="毛重">
                    <lay-input v-model="modelForm.gw">
                      <template #suffix>克</template>
                    </lay-input>
                  </lay-form-item>
                  <lay-form-item label="净重">
                    <lay-input v-model="modelForm.nw">
                      <template #suffix>克</template>
                    </lay-input>
                  </lay-form-item>
                  <lay-form-item label="浓度">
                    <lay-input v-model="modelForm.concentration"> </lay-input>
                  </lay-form-item>
                  <lay-form-item label="体积">
                    <lay-input v-model="modelForm.volume"></lay-input>
                    <template #suffix>平方</template>
                  </lay-form-item>
                  <lay-form-item label="毛利率">
                    <lay-input
                      v-model.number="modelForm.gross_margin"
                      type="number"
                    >
                      <template #suffix>/%</template>
                    </lay-input>
                  </lay-form-item>
                  <lay-form-item label="积分率/元">
                    <lay-input
                      v-model.number="modelForm.integration"
                      type="number"
                    >
                      <template #suffix>/分</template>
                    </lay-input>
                  </lay-form-item>
                  <lay-form-item label="过敏源">
                    <lay-input v-model="modelForm.allergen"></lay-input>
                  </lay-form-item>
                  <lay-form-item label="禁忌">
                    <lay-input v-model="modelForm.taboos"></lay-input>
                  </lay-form-item>
                  <lay-form-item label="库存上限">
                    <lay-input
                      v-model.number="modelForm.stock_ceiling"
                      type="number"
                    ></lay-input>
                  </lay-form-item>
                  <lay-form-item label="库存下限">
                    <lay-input
                      v-model.number="modelForm.stock_lower"
                      type="number"
                    ></lay-input>
                  </lay-form-item>
                </div>
              </lay-col>
              <lay-col md="8">
                <lay-field title="开关" style="width: 270px">
                  <template #title>
                    <span style="font-size: 14px">开关</span>
                  </template>
                  <lay-form-item>
                    <lay-checkbox
                      name="off_stock"
                      v-model="off_array.off_stock"
                      value="off_stock"
                      label="管理库存"
                      @click="
                        off_array_click(
                          $event,
                          'off_stock',
                          off_array.off_stock
                        )
                      "
                    ></lay-checkbox>
                    <lay-checkbox
                      name="off_discount"
                      v-model="off_array.off_discount"
                      value="off_discount"
                      label="可以打折"
                      @click="
                        off_array_click(
                          $event,
                          'off_discount',
                          off_array.off_discount
                        )
                      "
                    ></lay-checkbox>
                  </lay-form-item>
                  <lay-form-item>
                    <lay-checkbox
                      name="off_deduct"
                      v-model="off_array.off_deduct"
                      value="off_deduct"
                      label="开启提成"
                      @click="
                        off_array_click(
                          $event,
                          'off_deduct',
                          off_array.off_deduct
                        )
                      "
                    ></lay-checkbox>
                    <lay-checkbox
                      name="off_after_sale"
                      v-model="off_array.off_after_sale"
                      value="off_after_sale"
                      label="拥有售后"
                      @click="
                        off_array_click(
                          $event,
                          'off_after_sale',
                          off_array.off_after_sale
                        )
                      "
                    ></lay-checkbox>
                  </lay-form-item>
                  <lay-form-item>
                    <lay-checkbox
                      name="off_putaway_web"
                      v-model="off_array.off_putaway_web"
                      value="off_putaway_web"
                      label="上架商城"
                      @click="
                        off_array_click(
                          $event,
                          'off_putaway_web',
                          off_array.off_putaway_web
                        )
                      "
                    ></lay-checkbox>
                    <lay-checkbox
                      name="off_print_label"
                      v-model="off_array.off_print_label"
                      value="off_print_label"
                      label="打印标签"
                      @click="
                        off_array_click(
                          $event,
                          'off_print_label',
                          off_array.off_print_label
                        )
                      "
                    ></lay-checkbox>
                  </lay-form-item>
                  <lay-form-item>
                    <lay-checkbox
                      name="off_market_goods"
                      v-model="off_array.off_market_goods"
                      value="off_market_goods"
                      label="专柜商品"
                      @click="
                        off_array_click(
                          $event,
                          'off_market_goods',
                          off_array.off_market_goods
                        )
                      "
                    ></lay-checkbox>
                    <lay-checkbox
                      name="off_freebie"
                      v-model="off_array.off_freebie"
                      value="off_freebie"
                      label="可为赠品"
                      @click="
                        off_array_click(
                          $event,
                          'off_freebie',
                          off_array.off_freebie
                        )
                      "
                    ></lay-checkbox>
                  </lay-form-item>
                </lay-field>
              </lay-col>
            </lay-row>
          </div>
        </lay-tab-item>
        <lay-tab-item title="多包装/多条码" id="A2">
          <div style="padding: 0px 10px 0px 10px; margin: 0px">
            <lay-form-item>
              <lay-row space="10">
                <lay-col md="16">
                  <!-- 多单位-表格 -->
                  <lay-table
                    height="190px"
                    size="sm"
                    :columns="GP.Goods_unit_columns"
                    :data-source="modelForm.unit_tab"
                    :rowStyle="cellStyle"
                    @row="Goods_unit_row"
                  >
                    <template #unit_pack="{ data }">
                      <span
                        :style="data.unit_pack == 'A' ? '' : 'color: #FF6C37;'"
                      >
                        {{ data.unit_pack == "A" ? "是" : "否" }}
                      </span>
                    </template>
                    <template #barcode="{ data }">
                      <lay-input
                        v-if="data.isEdit"
                        :model-value="data.barcode"
                        :disabled="data.off_operation == 1"
                        @input="GoodsPackChangeData($event, data, 'barcode')"
                      ></lay-input>
                      <span v-else>
                        {{ data.barcode }}
                      </span>
                    </template>
                    <template #unit="{ data }">
                      <lay-input
                        v-if="data.isEdit"
                        :model-value="data.unit"
                        @input="GoodsPackChangeData($event, data, 'unit')"
                      ></lay-input>
                      <span v-else>
                        {{ data.unit }}
                      </span>
                    </template>
                    <template #unit_factor="{ data }">
                      <lay-input
                        v-if="data.isEdit"
                        :model-value="data.unit_factor"
                        @input="
                          GoodsPackChangeData($event, data, 'unit_factor')
                        "
                      ></lay-input>
                      <span v-else>
                        <lay-tooltip
                          :enterable="false"
                          :content="tooltip_content(data)"
                        >
                          <span>{{ data.unit_factor }}</span>
                        </lay-tooltip>
                      </span>
                    </template>
                    <template #unit_size="{ data }">
                      <lay-input
                        v-if="data.isEdit"
                        :model-value="data.unit_size"
                        @input="GoodsPackChangeData($event, data, 'unit_size')"
                      ></lay-input>
                      <span v-else>
                        {{ data.unit_size }}
                      </span>
                    </template>
                    <template #operate="{ data }">
                      <span v-if="data.unit_pack == 'A'">
                        <lay-button
                          type="primary"
                          size="xs"
                          v-if="!data.isEdit"
                          @click="GoodsPackEdit(data)"
                        >
                          编辑
                        </lay-button>
                        <lay-button
                          type="primary"
                          size="xs"
                          v-if="data.isEdit"
                          @click="GoodsPackSaveTable(data)"
                        >
                          保存
                        </lay-button>
                        <lay-button
                          type="danger"
                          size="xs"
                          v-if="data.dbid == ''"
                          @click="GoodsPackDel(data)"
                        >
                          删除
                        </lay-button>
                      </span>
                      <span v-else>
                        <lay-tooltip content="基本单位商品">
                          <span>基本单位</span>
                        </lay-tooltip>
                      </span>
                    </template>
                  </lay-table>
                  <lay-button
                    border="green"
                    border-style="dashed"
                    :fluid="true"
                    @click="GoodsPackAdd"
                    style="margin-top: 10px"
                    >新增</lay-button
                  >
                </lay-col>
                <lay-col md="8">
                  <!-- 辅助条码-表格 -->
                  <lay-table
                    resize
                    height="190px"
                    size="sm"
                    :columns="GP.Goods_barcode_columns"
                    :data-source="current_data.barcode_data"
                  >
                    <template #barcode="{ data }">
                      <lay-input
                        v-if="data.isEdit && data.db_state == 'A'"
                        :model-value="data.barcode"
                        @input="GoodsBarcodeChangeData($event, data, 'barcode')"
                      ></lay-input>
                      <span v-else>
                        {{ data.barcode }}
                      </span>
                    </template>
                    <template #operate="{ data }">
                      <div v-if="data.db_state == 'A'">
                        <lay-button
                          type="primary"
                          size="xs"
                          v-if="!data.isEdit"
                          @click="GoodsBarcodeEdit(data)"
                        >
                          编辑
                        </lay-button>
                        <lay-button
                          type="primary"
                          size="xs"
                          v-if="data.isEdit"
                          @click="GoodsBarcodeSaveTable(data)"
                        >
                          保存
                        </lay-button>
                        <lay-button
                          type="danger"
                          size="xs"
                          @click="GoodsBarcodeDel(data)"
                        >
                          删除
                        </lay-button>
                      </div>
                    </template>
                  </lay-table>
                  <lay-button
                    border="green"
                    border-style="dashed"
                    :fluid="true"
                    @click="GoodsBarcodeAdd"
                    style="margin-top: 10px"
                    v-if="current_data.current"
                    >新增</lay-button
                  >
                </lay-col>
              </lay-row>
            </lay-form-item>
            <lay-form-item>
              <lay-field
                title="价格模块"
                style="width: 100%"
                v-if="current_data.goods_info.unit_pack == 'A'"
              >
                <template #title>
                  <span style="font-size: 14px"
                    >大包装-{{ current_data.goods_info.id }}：{{
                      current_data.goods_dbid
                    }}</span
                  >
                </template>
                <lay-row space="8">
                  <lay-col md="12">
                    <div>
                      <lay-form-item label="商品名称">
                        <lay-input
                          v-model="current_data.goods_info.name"
                        ></lay-input>
                      </lay-form-item>
                    </div>
                  </lay-col>
                  <lay-col md="12">
                    <lay-form-item>
                      <lay-checkbox
                        name="unit_off_putaway_web"
                        v-model="
                          current_data.goods_info.off_array.off_putaway_web
                        "
                        value="unit_off_putaway_web"
                        label="上架商城"
                        @click="
                          unit_off_array_click(
                            $event,
                            'off_putaway_web',
                            current_data.goods_info.off_array.off_putaway_web
                          )
                        "
                      ></lay-checkbox>
                    </lay-form-item>
                  </lay-col>
                </lay-row>
                <lay-row space="8">
                  <lay-col md="6">
                    <div>
                      <lay-form-item label="进货价/元">
                        <lay-input
                          v-model.number="current_data.goods_info.prc_in"
                          type="number"
                        ></lay-input>
                      </lay-form-item>
                      <lay-form-item label="商城价/元">
                        <lay-input
                          v-model.number="current_data.goods_info.prc_web"
                          type="number"
                        ></lay-input>
                      </lay-form-item>
                    </div>
                  </lay-col>
                  <lay-col md="6">
                    <div>
                      <lay-form-item label="批发价/元">
                        <lay-input
                          v-model.number="current_data.goods_info.prc_cust"
                          type="number"
                        ></lay-input>
                      </lay-form-item>
                      <lay-form-item label="团购价/元">
                        <lay-input
                          v-model.number="current_data.goods_info.prc_groupon"
                          type="number"
                        ></lay-input>
                      </lay-form-item>
                    </div>
                  </lay-col>
                  <lay-col md="6">
                    <div>
                      <lay-form-item label="会员价/元">
                        <lay-input
                          v-model.number="current_data.goods_info.prc_vip"
                          type="number"
                        ></lay-input>
                      </lay-form-item>
                      <lay-form-item label="配送价/元">
                        <lay-input
                          v-model.number="current_data.goods_info.prc_dist"
                          type="number"
                        ></lay-input>
                      </lay-form-item>
                    </div>
                  </lay-col>
                  <lay-col md="6">
                    <div>
                      <lay-form-item label="零售价/元">
                        <lay-input
                          v-model.number="current_data.goods_info.prc_sale"
                          type="number"
                        ></lay-input>
                      </lay-form-item>
                      <lay-form-item label="同行价/元">
                        <lay-input
                          v-model.number="current_data.goods_info.prc_same"
                          type="number"
                        ></lay-input>
                      </lay-form-item>
                    </div>
                  </lay-col>
                </lay-row>
              </lay-field>
            </lay-form-item>
          </div>
        </lay-tab-item>
        <!-- 辅助条码 END -->
      </lay-tab>
    </lay-form>
  </lay-layer>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { layer } from "@layui/layui-vue";
import {
  GoodsUP,
  GoodsNEW,
  GoodsID,
  BarcodeNew,
  GoodsAutoNumber,
  getSupList,
} from "../../../../api/module/user"; //请求模块
import GoodsPack from "./GoodsPack"; //商品多包装单位、多条码设置文件
const GP = new GoodsPack();
const BBS = GP.AA("GoodsPack 加载......" + window.location.href);
const emit = defineEmits(["topClick"]); //子父组件通讯
const layer_title = ref("新增"); //弹窗标题
const shadeClose = ref(true); //遮盖层关闭
const http_r_p = ref("up"); //新增还是修改
const visible = ref<boolean>(false); // 弹窗显示
const Tab_vmodel = ref("1"); //选项卡Tab当前激活ID
const Form_Ref = ref(); //表单监听Ref
// 初始化-表单字段
const modelForm = ref<any>({
  id: -1,
  dbid: "",
  barcode: "商品条码", //商品条码
  name: "商品名称", //商品名称
  unit: "基本单位", //基本单位
  auto_number: "自动编号", //自动编号
  goods_no: "商品货号", //商品货号
  serial_number: "序列号", //序列号
  custom_code: "自编码", //自编码
  name_web: "商城品名", //商城品名
  name_print: "打印品名", //打印品名
  name_py: "拼音码", //拼音码
  brand: "商品品牌", //商品品牌
  prc_in: 0.0, //进货价
  prc_cust: 0.0, //批发价
  prc_vip: 0.0, //会员价
  prc_sale: 0.0, //零售价
  prc_web: 0.0, //商城价
  prc_dist: 0.0, //配送价
  prc_transfer_goods: 0.0, //调货价
  prc_same: 0.0, //同行价
  prc_groupon: 0.0, //团购价
  prc_ws: 0.0, //微商价
  prc_head: 0.0, //团长价
  cls_id: 1, //商品类别
  sup_dbid: "SUP-SYS", //主供应商
  nature_flag: "A", //商品性质
  group_flag: "A", //捆绑组合
  state: "A", //商品状态
  deduct: "A", //提成方式
  distribute: "A", //经销方式
  encapsulation: "A", //封装方式
  form: "A", //形态
  toxicity: "A", //毒性
  unit_size: "包装规格", //包装规格
  goods_size: "商品规格", //商品规格
  sku_size: "规格款式", //规格款式
  producing_area: "产地", //产地
  manufacturers: "厂家", //厂家
  product_model: "型号", //型号
  taste: "", //口味
  edition: "版本", //版本
  trademark: "商标", //商标
  colour: "颜色", //颜色
  size: "尺寸", //尺寸
  attribute: "属性", //属性
  gw: "毛重", //毛重
  nw: "净重", //净重
  concentration: "浓度", //浓度
  volume: "体积", //体积
  allergen: "过敏源", //过敏源
  taboos: "禁忌", //禁忌
  stock_ceiling: 0, //库存上限
  stock_lower: 0, //库存下限
  gross_margin: 1, //毛利率
  integration: 1, //积分率
  expiration: 0, //保质期
  off_expiration: 0, //开关-管保质期_1是0否
  off_stock: 0, //开关-管理库存_1是0否
  off_deduct: 0, //开关-开启提成_1是0否
  off_discount: 0, //开关-可以打折_1是0否
  off_after_sale: 0, //开关-拥有售后_1是0否
  off_putaway_web: 0, //开关-上架商城_1是0否
  off_print_label: 0, //开关-打印标签_1是0否
  off_market_goods: 0, //开关-专柜商品_1是0否
  off_freebie: 0, //开关-可为赠品_1是0否
  off_operation: 0, //-开关-产生业务_1是0否
  off_lock_up: 0, //-编辑锁定_1是0否
  off_array: {
    off_expiration: true, //开关-管保质期_1是0否
    off_stock: true, //开关-管理库存_1是0否
    off_deduct: true, //开关-开启提成_1是0否
    off_discount: true, //开关-可以打折_1是0否
    off_after_sale: true, //开关-拥有售后_1是0否
    off_putaway_web: true, //开关-上架商城_1是0否
    off_print_label: true, //开关-打印标签_1是0否
    off_market_goods: true, //开关-专柜商品_1是0否
    off_freebie: true, //开关-可为赠品_1是0否
  },
  unit_tab: [
    {
      id: -1,
      dbid: "", //
      barcode: "", //
      barcode_data: [
        {
          id: -1,
          barcode: "辅助条码", //
          goods_dbid: "归属商品", //归属商品
          db_state: "A", //
        },
      ],
    },
  ],
});

// 基本单位-开关类集合
const off_array = ref({
  off_expiration: true, //开关-管保质期_1是0否
  off_stock: true, //开关-管理库存_1是0否
  off_deduct: true, //开关-开启提成_1是0否
  off_discount: true, //开关-可以打折_1是0否
  off_after_sale: true, //开关-拥有售后_1是0否
  off_putaway_web: true, //开关-上架商城_1是0否
  off_print_label: true, //开关-打印标签_1是0否
  off_market_goods: true, //开关-专柜商品_1是0否
  off_freebie: true, //开关-可为赠品_1是0否
});
// 基本单位-开关类状态转换
function off_array_click(event: any, off_key: any, off_value: boolean) {
  // console.log("基本单位-开关开关类集合回调", event.target.innerText, off_key, off_value);
  if (off_value) {
    modelForm.value[off_key] = 1;
  } else {
    modelForm.value[off_key] = 0;
  }
}
// 大单位-开关类状态转换
function unit_off_array_click(event: any, off_key: any, off_value: boolean) {
  console.log(
    "大单位-开关开关类集合回调",
    event.target.innerText,
    off_key,
    off_value
  );
  modelForm.value.unit_tab.forEach((item: any, index: number, array: any) => {
    if (item.dbid === current_data.value.goods_dbid) {
      if (off_value) {
        modelForm.value.unit_tab[index][off_key] = 1;
      } else {
        modelForm.value.unit_tab[index][off_key] = 0;
      }
    }
  });
}
// 当前激活的焦点数据
const current_data = ref({
  current: false, //当前是否激活
  goods_dbid: "", //商品档案表的数据编号-后端使用
  barcode_data: [], //辅助条码-后端使用
  goods_info: {
    id: -1, //
    unit_pack: "A", //是否大单位_A是B否
    name: "商品名称", //商品名称
    prc_in: 0.0, //进货价
    prc_web: 0.0, //商城价
    prc_cust: 0.0, //批发价
    prc_groupon: 0.0, //团购价
    prc_vip: 0.0, //会员价
    prc_dist: 0.0, //配送价
    prc_sale: 0.0, //零售价
    prc_same: 0.0, //同行价
    off_array: {
      off_putaway_web: true, //开关-上架商城_1是0否
    },
  }, //商品档案信息
});
//表单提交按键组
const FORM_btn = ref([
  {
    text: "表单提交",
    callback: () => {
      submit(); //提交
    },
  },
  {
    text: "表单较验",
    callback: () => {
      Form_validate(); //表单较验
    },
  },
  {
    text: "清除较验",
    callback: () => {
      clearValidate(); //清除较验
    },
  },
  {
    text: "取消",
    callback: () => {
      // original();//原始数据
      visible.value = !visible.value; //弹窗显示
    },
  },
]);

const form = reactive({}); //缓存旧数据为还原表单做准备
// 商品分类树
const godds_cls_data = ref([
  {
    title: "顶级类别",
    id: 1, //类别ID
    pid: 0, //父ID
    children: [],
  },
]);
// 供应商列表
const sup_data = ref([
  {
    title: "主供应商",
    id: "SUP-SYS", //供应商sup_dbid
  },
]);
// 商品类别选择器点击事件
function change_godds_cls_data(data: any) {
  console.log("商品类别选择器点击事件:", data);
}
// 供应商选择器点击事件
function change_sup_data(data: any) {
  console.log("供应商选择器点击事件", data);
}
// 单条商品远程数据
async function goods_id(id: number, dbid: string) {
  // modelForm.value = {};
  current_data.value.current = false;
  let http_db = await GoodsID({ id, dbid }); //远程获取树数据
  modelForm.value = http_db.db; //把上级行数据填到窗口中
  modelForm.value.unit_tab.forEach((item: any, index: number, array: any) => {
    if (item.dbid === current_data.value.goods_dbid) {
      current_data.value.barcode_data =
        modelForm.value.unit_tab[index].barcode_data;
      current_data.value.current = true;
    }
  });
  off_array.value = modelForm.value.off_array; //开关类集合

  console.log("modelForm", modelForm.value);
}

// 弹窗接收
const childFun = (op: string, data: any, treeData: any) => {
  // console.log("弹窗接收", data);
  visible.value = !visible.value;
  godds_cls_data.value = treeData; //分类树数组合并
  if (op == "up") {
    http_r_p.value = "up"; //新增还是修改
    layer_title.value = "修改：" + data.id + " " + data.name; //弹窗标题
    shadeClose.value = true; //遮盖层关闭
    goods_id(data.id, data.dbid);
  } else {
    http_r_p.value = "new"; //新增还是修改
    layer_title.value = "新增"; //弹窗标题
    shadeClose.value = false; //遮盖层关闭
    modelForm.value = {
      cls_id: 1, //分类ID
      sup_dbid: "SUP-SYS", //主供货商数据编号-默认SUP-SYS
      expiration: 0, //保质期(天)
      unit_tab: [],
    };
    auto_number_GoodsAutoNumber(); //自助编号
  }
};

////////////////////////////////////////////////////////////////////////
// 多单位/多条码/多价格-辅助条码 ST
// 多单位-表格数据
// 表格行样式
const cellStyle = (row: any, rowIndex: number) => {
  // console.log("行数据", row.unit_pack);
  // console.log("行索引", rowIndex);
  // 基本单位商品数据
  if (row.unit_pack == "B") {
    return "background-color:var(--global-neutral-color-1);color: #FF6C37;";
  }
};
//列字段提示
const tooltip_content = (row: any) => {
  // console.log("列字段提示-行数据", row);
  if (row.unit_pack == "A") {
    return "1" + row.unit + "内装" + row.unit_factor + modelForm.value.unit;
  } else if (row.unit_pack == "B") {
    return "基本单位";
  } else {
    return "……";
  }
};
// 表格-多单位-行单击
const Goods_unit_row = (row: any) => {
  // console.log("表格-多单位-行单击", row);
  current_data.value = {
    current: true, //当前是否激活
    goods_dbid: row.dbid, //商品档案表的数据编号-后端使用
    barcode_data: row.barcode_data, //辅助条码-后端使用
    goods_info: row, //商品档案信息
  };
};

// 表格-多单位-编辑
const GoodsPackEdit = (data: any) => {
  data.isEdit = true;
  // console.log("多单位-表格-编辑表格", data);
};
// 表格-辅助条码-编辑
const GoodsBarcodeEdit = (data: any) => {
  data.isEdit = true;
  // console.log("辅助条码-表格-编辑表格", data);
};
// 表格-多单位-保存
const GoodsPackSaveTable = (data: any) => {
  data.isEdit = false;
  // console.log("多单位-表格-保存表格编辑", data);
};
// 表格-辅助条码-保存
const GoodsBarcodeSaveTable = (data: any) => {
  data.isEdit = false;
  // console.log("辅助条码-保存", data);
  let vdb = {
    goods_dbid: current_data.value.goods_dbid,
    barcode: data.barcode, //辅助条码
  };
  if (vdb.barcode == "") {
    layer.msg("辅助条码不能为空", { icon: 2 });
  } else {
    HTTP_BarcodeNew(vdb); // 辅助条码-远程新增
  }
};
// 辅助条码-远程新增
const HTTP_BarcodeNew = async (db: any) => {
  let data = await BarcodeNew(db); //HTTP
  if (data.code == 200) {
    layer.msg(data.msg, { icon: 1 });
    goods_id(modelForm.value.id, modelForm.value.dbid);
  } else {
    layer.msg(data.msg, { icon: 2 });
  }
};

// 多单位-表格-表格编辑的输入事件
const GoodsPackChangeData = (val: any, data: any, key: string) => {
  data[key] = val;
};
// 辅助条码-表格-表格编辑的输入事件
const GoodsBarcodeChangeData = (val: any, data: any, key: string) => {
  data[key] = val;
};

// 多单位-表格-删除行逻辑
const GoodsPackDel = (data: any) => {
  // console.log("多单位-表格-删除行逻辑", data);
  layer.confirm("确定删除此条数据？", {
    btn: [
      {
        text: "确定",
        callback: () => {
          modelForm.value.unit_tab.forEach((item: any, index: number) => {
            if (item.id === data.id) {
              modelForm.value.unit_tab.splice(index, 1);
            }
          });
          layer.closeAll();
        },
      },
      {
        text: "取消",
        callback: () => {
          layer.closeAll();
        },
      },
    ],
  });
};
// 辅助条码-表格-删除行逻辑
const GoodsBarcodeDel = (data: any) => {
  // console.log("辅助条码-表格-删除行逻辑", data.goods_dbid);
  layer.confirm("确定删除此条数据？", {
    btn: [
      {
        text: "确定",
        callback: () => {
          modelForm.value.unit_tab.forEach(
            (item: any, index: number, array: any) => {
              if (item.dbid === data.goods_dbid) {
                modelForm.value.unit_tab[index].barcode_data.splice(index, 1);
              }
            }
          );
          layer.closeAll();
        },
      },
      {
        text: "取消",
        callback: () => {
          layer.closeAll();
        },
      },
    ],
  });
};
//多单位-新增行
const GoodsPackAdd = () => {
  // console.log("多单位-新增行");
  modelForm.value.unit_tab.push({
    id: modelForm.value.unit_tab.length + 1,
    dbid: "", //数据编号.唯一
    barcode: "", //主条码
    unit: "", //单位
    unit_factor: "", //装量
    unit_size: "", //包装规格
    unit_pack: "A", //包装单位-是否大单位_A是B否
    barcode_data: [], //辅助条码
    off_array: { off_putaway_web: true },
    off_putaway_web: 1, //上架商城
  });
};
// 辅助条码-新增行
const GoodsBarcodeAdd = () => {
  // console.log("辅助条码-新增行");
  modelForm.value.unit_tab.forEach((item: any, index: number, array: any) => {
    if (item.dbid == current_data.value.goods_dbid) {
      if (item.dbid == "") {
        layer.msg("请先保存“" + item.barcode + "”数据", { icon: 2 });
      } else {
        modelForm.value.unit_tab[index].barcode_data.push({
          id: modelForm.value.unit_tab[index].barcode_data.length + 1,
          barcode: "辅助条码",
          goods_dbid: "归属商品",
          db_state: "A",
        });
      }
    }
  });
};

// 多单位/多条码/多价格 END
////////////////////////////////////////////////////////////////////////
// 表单校验规则
const Form_rules = ref({
  expiration: {
    type: "number", //保质期
    min: 0,
    max: 9999,
  },
  barcode: {
    type: "string", //条码
  },
  unit: {
    type: "string", //基本单位
  },
  name: {
    type: "string", //商品名
  },
});
// 表单数据校验
const Form_validate = () => {
  clearValidate(); //清除较验
  Form_Ref.value.validate((isValidate: boolean, model: any, errors: any) => {
    console.log("是否通过", isValidate); // isValidate 是否通过
    console.log("表单数据", model); // model 表单数据
    console.log("错误信息", errors); // errors 错误信息
    // layer.open({
    //     type: 1,
    //     title: "表单数据校验结果",
    //     content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(model)} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`,
    //     shade: false,
    //     isHtmlFragment: true,
    //     btn: [{ text: '确认', callback(index: any) { console.log(index); layer.close(index) } }],
    //     area: '500px'
    // });

    // if (isValidate) {
    //     let id = layer.load(1)
    //     setTimeout(() => {
    //         layer.close(id)
    //         layer.msg('提交成功', { icon: 1, time: 1000 })
    //         setTimeout(() => {
    //             Form_Ref.value.clearValidate();//清除校验
    //         }, 200)
    //     }, 2000)
    // } else {
    // }
  });
};

////////////////////////////////////////////////////////////////////////

// 原始数据
const original = () => {
  // console.log("原始数据");
  Object.assign(modelForm.value, { ...form });
};
// 清空表单
const reset = () => {
  // console.log("清空表单");
  Form_Ref.value.reset();
};
// 清除校验
const clearValidate = () => {
  // console.log("清除校验");
  Form_Ref.value.clearValidate(); //清除较验
};
// 窗口销毁
const end = (id: any) => {
  current_data.value = {
    current: false, //当前是否激活
    goods_dbid: "", //商品档案表的数据编号-后端使用
    barcode_data: [], //辅助条码-后端使用
    goods_info: {
      id: -1, //
      unit_pack: "A", //是否大单位_A是B否
      name: "商品名称", //商品名称
      prc_in: 0.0, //进货价
      prc_web: 0.0, //商城价
      prc_cust: 0.0, //批发价
      prc_groupon: 0.0, //团购价
      prc_vip: 0.0, //会员价
      prc_dist: 0.0, //配送价
      prc_sale: 0.0, //零售价
      prc_same: 0.0, //同行价
      off_array: {
        off_putaway_web: true, //开关-上架商城_1是0否
      },
    }, //商品档案信息
  };
  Tab_vmodel.value = "1"; //TAB激活ID
  http_r_p.value == "new"; //新增窗口
  console.log(`窗口销毁:${id}`);
};
// 窗口关闭
const close = (id: any) => {
  console.log(`关闭前置:${id}`);
};
// 窗口关闭前置
const beforeClose = (id: any) => {
  console.log(`窗口关闭前置:${id}`);
  original();
};
////////////////////////////////////////////////////////////////////////
// 提交表单
const submit = function () {
  // console.log("提交表单");
  Form_Ref.value.validate((isValidate: any, model: any, errors: any) => {
    console.log("是否通过", isValidate); // isValidate 是否通过
    console.log("表单数据", model); // model 表单数据
    console.log("错误信息", errors); // errors 错误信息
    if (isValidate) {
      http_r(model);
    } else {
    }
  });
};
// HTTP请求
const http_r = async (model: any) => {
  console.log("HTTP请求");
  //新增还是修改
  if (http_r_p.value == "up") {
    let data = await GoodsUP(model); //HTTP
    console.log(data);
    if (data.code == 200) {
      layer.msg(data.msg, { icon: 1 }, async () => {
        emit("topClick", "父组件事件");
        visible.value = !visible.value;
      });
    } else {
      layer.msg(data.msg, { icon: 2 });
    }
  } else if (http_r_p.value == "new") {
    let data = await GoodsNEW(model); //HTTP
    if (data.code == 200) {
      layer.msg(data.msg, { icon: 1 }, async () => {
        emit("topClick", "父组件事件");
        visible.value = !visible.value;
      });
    } else {
      layer.msg(data.msg, { icon: 2 });
    }
  } else {
  }
};
// 获取商品档案自动编号
const auto_number_GoodsAutoNumber = async () => {
  layer.load(0, { time: 1000 });
  let data = await GoodsAutoNumber({ val: "获取商品档案自动编号" }); //HTTP
  modelForm.value.auto_number = data.count;
  console.log("获取商品档案自动编号", data);
};
//选项卡Tab事件
function tab_change_unit(id: any) {
  // console.log("选项卡Tab当前激活ID,", id);
  // console.log("选项卡Tab当前激活ID,", Tab_vmodel.value);
  if (http_r_p.value == "new") {
    layer.msg("请先保存基本信息", { icon: 2 });
    Tab_vmodel.value = "1";
  }
}

//向父组件暴露子组件的方法或者数据
defineExpose({ childFun });

const initPage = async () => {
  const { code, db: res } = await getSupList();
  console.log("list---->", res);
  if (code == 200) {
    // dataList.value = res.data; sup_data
    // page.value.total = res.total;
    const datas = res.data;
    datas.map((item) => {
      item.label = item.name;
      item.value = item.dbid;
    });

    sup_data.value = datas;
  }
};

onMounted(() => {
  initPage();
});
</script>
